import React from 'react'
import { useTranslation } from 'react-i18next';
import Nav from 'components/Nav/Nav';
import Footer from 'components/Footer/Footer';
import './home-pc.scss'
const explanationSegmentationImg = require('assets/home/explanation-segmentation@2x.png')
let line: any = null;
if (document.documentElement.clientWidth > 1440) {
    line = require('assets/home/line@2x.png')
} else {
    line = require('assets/home/line1440@2x.png')
}

const base = require('assets/home/base@2x.png')
const adorn = require('assets/home/adorn@2x.png')
const lightning = require('assets/home/lightning@2x.png')
const smiley = require('assets/home/smiley@2x.png')
const people = require('assets/home/people@2x.png')
const contactUsLine = require('assets/home/contact-line1@2x.png')
const contactUsLine2 = require('assets/home/contact-line2@2x.png')
const contactUs = require('assets/home/contact-us@2x.png')
const contactUsLogo = require('assets/home/contact-us-logo@2x.png')
const featureDetailBg = require('assets/home/feature-detail-bg@2x.png')
const appStore = require('assets/home/appStore@2x.png')
const googlePlay = require('assets/home/googlePlay@2x.png')
const uploadBtn = require('assets/home/contactUs-btn-bg@2x.png')

function HomePc() {
    const { t, i18n } = useTranslation();
    const enLanguage = i18n.language === 'en' ? true : false; // 英文 另外样式

    const anchorEvent = (anchorName: string) => {
        if (anchorName) {
            let anchorElement = document.getElementById(anchorName);
            if (anchorElement) { anchorElement.scrollIntoView(); }
        }
    }
    return (
        <div id='homePage' className={enLanguage ? 'homePage-pc enTxtStyle' : 'homePage-pc'}>
            {/* 头部 */}
            <header>
                <Nav anchorEvent={anchorEvent} />
                <hgroup>
                    <div className='banner-p1'>
                        {
                            t('bannerTitle1')
                        }
                    </div>
                    <div className='banner-p2'>
                        {
                            t('bannerTitle2')
                        }
                    </div>
                </hgroup>
            </header>
            {/* 头部与内容间 线条 */}
            <div className="banner-line"></div>
            {/* 内容 */}
            <main>
                {/* 介绍 */}
                <section className='explanation-box'>
                    <ul>
                        <li>
                            <div className='explanation-logo'>
                                <div className='explanation-logo-img menu'>

                                </div>
                            </div>
                            <div className='line'>
                                <img src={explanationSegmentationImg} alt="分割线" />
                            </div>
                            <p>
                                {
                                    t('explanationP1')
                                }
                            </p>
                        </li>
                        <li>
                            <div className='explanation-logo'>
                                <div className='explanation-logo-img aims'></div>
                            </div>
                            <div className='line'>
                                <img src={explanationSegmentationImg} alt="分割线" />
                            </div>
                            <p>
                                {
                                    t('explanationP2')
                                }
                            </p>
                        </li>
                        <li>
                            <div className='explanation-logo'>
                                <div className='explanation-logo-img wallet'></div>
                            </div>
                            <div className='line'>
                                <img src={explanationSegmentationImg} alt="分割线" />
                            </div>
                            <p>
                                {
                                    t('explanationP3')
                                }
                            </p>
                        </li>
                    </ul>
                </section>

                {/* 特点 */}
                <section className='feature-box'>
                    <section className='feature-intuitive'>
                        <div className='feature-icon-box'>
                            <img src={line} className='feature-line' alt="线" />
                            <div className='feature-icon-lamp'>
                                <img src={base} className="feature-base" alt="底座" />
                                <img src={adorn} className="feature-adorn" alt="装饰" />
                                <img src={lightning} className="feature-icon lightning" alt="闪电" />
                            </div>
                        </div>
                        <div className='feature-detail'>
                            <div className='feature-detail-title'>
                                <img src={featureDetailBg} alt="" />
                                <span>
                                    {
                                        t("featureIntuitiveTitle")
                                    }
                                </span>
                            </div>
                            <div className='feature-detail-txt'>
                                {
                                    t("featureIntuitiveTxt")
                                }
                            </div>
                        </div>
                    </section>
                    <section className='feature-interesting'>
                        <div className='feature-detail'>
                            <div className='feature-detail-title'>
                                <img src={featureDetailBg} alt="" />
                                <span>
                                    {
                                        t("featureInterestingTitle")
                                    }
                                </span>
                            </div>
                            <div className='feature-detail-txt'>
                                {
                                    t("featureInterestingTxt")
                                }
                            </div>
                        </div>
                        <div className='feature-icon-box'>
                            <div className='feature-icon-lamp  feature-icon-smiley'>
                                <img src={base} className="feature-base smiley-base" alt="底座" />
                                <img src={adorn} className="feature-adorn smiley-adorn" alt="装饰" />
                                <img src={smiley} className="feature-icon smiley" alt="笑脸" />
                            </div>
                            <img src={line} className='feature-line smiley-line' alt="线" />
                        </div>

                    </section>
                    <section className='feature-cooperation'>
                        <div className='feature-icon-box'>
                            <img src={line} className='feature-line' alt="线" />

                            <div className='feature-icon-lamp'>
                                <img src={base} className="feature-base" alt="底座" />
                                <img src={adorn} className="feature-adorn" alt="装饰" />
                                <img src={people} className="feature-icon people" alt="人" />
                            </div>
                        </div>
                        <div className='feature-detail'>
                            <div className='feature-detail-title'>
                                <img src={featureDetailBg} alt="" />
                                <span>
                                    {
                                        t("featureCooperationTitle")
                                    }
                                </span>
                            </div>
                            <div className='feature-detail-txt'>
                                {
                                    t("featureCooperationTxt")
                                }
                            </div>
                        </div>

                    </section>
                </section>

                {/* 联系我们 */}
                <section className='contact-us-box' id="contactUs">
                    <div className='contact-us-bg'>
                        <img src={contactUsLine} alt="线1" />
                        <img src={contactUs} alt="背景" />
                        <img src={contactUsLogo} alt="logo" />
                        <img src={contactUsLine2} alt="背景" />
                        <img src={contactUsLine2} alt="背景" />
                        <img src={adorn} alt="点缀" />
                        <img src={adorn} alt="点缀" />
                        <img src={adorn} alt="点缀" />
                    </div>
                    <div className='contact-us-txt'>
                        <p>
                            {
                                t('downloadTitle')
                            }
                        </p>
                        <button className='uploadBtn'>
                            <img src={uploadBtn} className='btn-bg' alt="背景" />
                            <img src={appStore} className='btn-icon' alt="AppStore" />
                            <span className='upload-txt'>
                                AppStore
                            </span>
                        </button>
                        <button className='uploadBtn'>
                            <img src={uploadBtn} className='btn-bg' alt="背景" />
                            <img src={googlePlay} className='btn-icon googlePlay' alt="googlePlay" />

                            <span className='googleplayTxt upload-txt'>
                                Goole Play
                            </span>
                        </button>

                    </div>
                </section>
            </main>
            {/* 页脚 */}
            <Footer />
        </div >
    )
}
export default HomePc
